<script setup>

import {onMounted, ref} from "vue";
import {roleText, UserUpdateDTO, UserVO} from "@/model/account.js";
import {useLoginStorage} from "@/stores/loginStorage.js";
import {r_a_logout, r_a_update} from "@/request/api/account.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const loginStore = useLoginStorage();
const router = useRouter();

const userInfo = ref(loginStore.getUserInfo);
const userUpdateInfo = ref({...UserUpdateDTO});
const visible = ref(false);
const isChPassword = ref(false);

const logout = () => {

  r_a_logout().then(ok => {
    if (!ok) return;
    location.reload();
    loginStore.$reset();
    router.push('/hub');
  });
}

const update = () => {
  let tip = '';

  // 账号名验证
  const username = userUpdateInfo.value.username;
  if (username === null || username === '') tip += '账号名不能为空';

  // 密码验证
  if (isChPassword.value) {
    const oldPassword = userUpdateInfo.value.oldPassword;
    const newPassword = userUpdateInfo.value.newPassword;
    if (oldPassword === null || oldPassword === '' ||
        newPassword === null || newPassword === '') tip += '，密码不能为空';
  } else userUpdateInfo.value.newPassword = userUpdateInfo.value.oldPassword = null;

  if (tip !== '') ElMessage.error(tip);
  else r_a_update(userUpdateInfo.value).then(ok => {
    if (!ok) return;
    ElMessage.success('更 新 成 功');
    loginStore.setUserInfo({username: userUpdateInfo.value.username});
  });
}

onMounted(() => {
  userUpdateInfo.value.userId = userInfo.value.userId;
});
</script>

<template>
  <div class="index-all">
    <div class="left">
      <el-descriptions title="账 号 信 息" :column="1" label-width="60px">
        <el-descriptions-item label="用 户 ID:">{{ userInfo.userId }}</el-descriptions-item>
        <el-descriptions-item label="用 户 名:">{{ userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="角 色:">{{ roleText(userInfo.role) }}</el-descriptions-item>
      </el-descriptions>
      <br>
      <el-button class="operation" @click="visible = true">更 改 账 户 信 息</el-button>
      <br><br>
      <el-button class="operation" @click="logout">退 出 登 录</el-button>
    </div>

    <div class="right">
      <el-drawer v-model="visible" title="账 户 设 置" :show-close="false" size="400"
                 @closed="isChPassword = visible = false;">
        <el-form :model="userInfo" inline label-position="right">
          <el-form-item label="用 户 名">
            <el-input v-model="userUpdateInfo.username" placeholder="设 置 新 账 号 名"/>
          </el-form-item>
          <el-form-item label="旧 密 码" v-if="isChPassword">
            <el-input type="password" v-model="userUpdateInfo.oldPassword" show-password
                      placeholder="输 入 旧 密 码"/>
          </el-form-item>
          <el-form-item label="新 密 码" v-if="isChPassword">
            <el-input type="password" v-model="userUpdateInfo.newPassword" show-password
                      placeholder="设 置 新 密 码"/>
          </el-form-item>
        </el-form>

        <el-button v-if="!isChPassword" @click="isChPassword = true">更 改 密 码</el-button>
        <el-button v-if="isChPassword" @click="isChPassword = false">取 消 更 改 密 码</el-button>

        <template #footer>
          <el-button type="primary" @click="isChPassword = visible = false;">取 消</el-button>
          <el-button type="success" @click="update">保 存</el-button>
        </template>
      </el-drawer>
    </div>

  </div>
</template>

<style scoped>
.left, .right {
  display: inline-block;
}

.left {
  width: 30%;
  min-height: 500px;
  border-right: groove 1px;
  padding: 10px
}

.operation {
  width: 200px;
  border: groove 1px;
}

</style>